/**
 * WMS动画和过渡效果
 * 
 * 提供统一的动画效果和过渡样式
 * 支持动画偏好设置和性能优化
 */

/* ================================
 * 基础过渡效果
 * ================================ */

/* 通用过渡类 */
.wms-transition {
  transition: var(--wms-transition-base);
}

.wms-transition-fast {
  transition: var(--wms-transition-fast);
}

.wms-transition-slow {
  transition: var(--wms-transition-slow);
}

/* 属性特定过渡 */
.wms-transition-colors {
  transition: color var(--wms-transition-duration-base) var(--wms-transition-timing-ease),
              background-color var(--wms-transition-duration-base) var(--wms-transition-timing-ease),
              border-color var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

.wms-transition-transform {
  transition: transform var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

.wms-transition-opacity {
  transition: opacity var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

.wms-transition-shadow {
  transition: box-shadow var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* ================================
 * 入场动画 - Enter Animations
 * ================================ */

/* 淡入动画 */
@keyframes wms-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wms-fade-in {
  animation: wms-fade-in var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 从上滑入 */
@keyframes wms-slide-in-top {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.wms-slide-in-top {
  animation: wms-slide-in-top var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 从下滑入 */
@keyframes wms-slide-in-bottom {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.wms-slide-in-bottom {
  animation: wms-slide-in-bottom var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 从左滑入 */
@keyframes wms-slide-in-left {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.wms-slide-in-left {
  animation: wms-slide-in-left var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 从右滑入 */
@keyframes wms-slide-in-right {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.wms-slide-in-right {
  animation: wms-slide-in-right var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 缩放入场 */
@keyframes wms-scale-in {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.wms-scale-in {
  animation: wms-scale-in var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 弹性入场 */
@keyframes wms-bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.wms-bounce-in {
  animation: wms-bounce-in var(--wms-transition-duration-slow) cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 旋转入场 */
@keyframes wms-rotate-in {
  from {
    transform: rotate(-180deg) scale(0.5);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

.wms-rotate-in {
  animation: wms-rotate-in var(--wms-transition-duration-slow) var(--wms-transition-timing-ease);
}

/* ================================
 * 退场动画 - Exit Animations
 * ================================ */

/* 淡出动画 */
@keyframes wms-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.wms-fade-out {
  animation: wms-fade-out var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 向上滑出 */
@keyframes wms-slide-out-top {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-20px);
    opacity: 0;
  }
}

.wms-slide-out-top {
  animation: wms-slide-out-top var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 向下滑出 */
@keyframes wms-slide-out-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(20px);
    opacity: 0;
  }
}

.wms-slide-out-bottom {
  animation: wms-slide-out-bottom var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 缩放退出 */
@keyframes wms-scale-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
}

.wms-scale-out {
  animation: wms-scale-out var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* ================================
 * 循环动画 - Loop Animations
 * ================================ */

/* 旋转加载 */
@keyframes wms-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.wms-spin {
  animation: wms-spin 1s linear infinite;
}

/* 脉冲动画 */
@keyframes wms-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.wms-pulse {
  animation: wms-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 弹跳动画 */
@keyframes wms-bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.wms-bounce {
  animation: wms-bounce 1s infinite;
}

/* 摇摆动画 */
@keyframes wms-wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}

.wms-wiggle {
  animation: wms-wiggle 1s ease-in-out;
}

/* 呼吸灯效果 */
@keyframes wms-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.wms-breathe {
  animation: wms-breathe 3s ease-in-out infinite;
}

/* ================================
 * 悬停效果 - Hover Effects
 * ================================ */

/* 悬停上浮 */
.wms-hover-lift {
  transition: var(--wms-transition-base);
}

.wms-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--wms-shadow-md);
}

/* 悬停缩放 */
.wms-hover-scale {
  transition: var(--wms-transition-base);
}

.wms-hover-scale:hover {
  transform: scale(1.05);
}

/* 悬停旋转 */
.wms-hover-rotate {
  transition: var(--wms-transition-base);
}

.wms-hover-rotate:hover {
  transform: rotate(5deg);
}

/* 悬停发光 */
.wms-hover-glow {
  transition: var(--wms-transition-base);
}

.wms-hover-glow:hover {
  box-shadow: 0 0 20px var(--wms-primary-color-light);
}

/* 悬停渐变背景 */
.wms-hover-gradient {
  background: linear-gradient(45deg, var(--wms-primary-color), var(--wms-primary-color-dark));
  background-size: 200% 200%;
  transition: background-position var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

.wms-hover-gradient:hover {
  background-position: 100% 0;
}

/* ================================
 * 加载动画 - Loading Animations
 * ================================ */

/* 点状加载 */
@keyframes wms-loading-dots {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.wms-loading-dots {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 10px;
}

.wms-loading-dots div {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wms-primary-color);
  animation: wms-loading-dots 1.4s infinite ease-in-out both;
}

.wms-loading-dots div:nth-child(1) { left: 0; animation-delay: -0.32s; }
.wms-loading-dots div:nth-child(2) { left: 16px; animation-delay: -0.16s; }
.wms-loading-dots div:nth-child(3) { left: 32px; animation-delay: 0; }

/* 波浪加载 */
@keyframes wms-loading-wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}

.wms-loading-wave {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.wms-loading-wave div {
  background-color: var(--wms-primary-color);
  height: 100%;
  width: 6px;
  display: inline-block;
  margin-right: 2px;
  animation: wms-loading-wave 1.2s infinite ease-in-out;
}

.wms-loading-wave div:nth-child(1) { animation-delay: -1.1s; }
.wms-loading-wave div:nth-child(2) { animation-delay: -1.0s; }
.wms-loading-wave div:nth-child(3) { animation-delay: -0.9s; }
.wms-loading-wave div:nth-child(4) { animation-delay: -0.8s; }
.wms-loading-wave div:nth-child(5) { animation-delay: -0.7s; }

/* 圆环加载 */
@keyframes wms-loading-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.wms-loading-ring {
  display: inline-block;
  width: 40px;
  height: 40px;
}

.wms-loading-ring:after {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  margin: 4px;
  border-radius: 50%;
  border: 3px solid var(--wms-primary-color);
  border-color: var(--wms-primary-color) transparent var(--wms-primary-color) transparent;
  animation: wms-loading-ring 1.2s linear infinite;
}

/* ================================
 * 通知动画 - Notification Animations
 * ================================ */

/* 通知滑入 */
@keyframes wms-notification-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.wms-notification-enter {
  animation: wms-notification-slide-in var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 通知滑出 */
@keyframes wms-notification-slide-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.wms-notification-leave {
  animation: wms-notification-slide-out var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* ================================
 * 模态框动画 - Modal Animations
 * ================================ */

/* 模态框背景淡入 */
@keyframes wms-modal-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.wms-modal-backdrop-enter {
  animation: wms-modal-backdrop-fade-in var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* 模态框内容缩放入场 */
@keyframes wms-modal-content-scale-in {
  from {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.wms-modal-content-enter {
  animation: wms-modal-content-scale-in var(--wms-transition-duration-base) var(--wms-transition-timing-ease);
}

/* ================================
 * 性能优化和可访问性
 * ================================ */

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .wms-spin,
  .wms-pulse,
  .wms-bounce,
  .wms-wiggle,
  .wms-breathe {
    animation: none !important;
  }
}

/* GPU加速优化 */
.wms-gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* 动画性能优化 */
.wms-optimize-animation {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translateZ(0);
}

/* ================================
 * 动画工具类
 * ================================ */

/* 动画延迟 */
.wms-animation-delay-100 { animation-delay: 0.1s; }
.wms-animation-delay-200 { animation-delay: 0.2s; }
.wms-animation-delay-300 { animation-delay: 0.3s; }
.wms-animation-delay-500 { animation-delay: 0.5s; }
.wms-animation-delay-700 { animation-delay: 0.7s; }
.wms-animation-delay-1000 { animation-delay: 1s; }

/* 动画持续时间 */
.wms-animation-duration-100 { animation-duration: 0.1s; }
.wms-animation-duration-200 { animation-duration: 0.2s; }
.wms-animation-duration-300 { animation-duration: 0.3s; }
.wms-animation-duration-500 { animation-duration: 0.5s; }
.wms-animation-duration-700 { animation-duration: 0.7s; }
.wms-animation-duration-1000 { animation-duration: 1s; }

/* 动画重复次数 */
.wms-animation-infinite { animation-iteration-count: infinite; }
.wms-animation-once { animation-iteration-count: 1; }
.wms-animation-twice { animation-iteration-count: 2; }

/* 动画填充模式 */
.wms-animation-fill-forwards { animation-fill-mode: forwards; }
.wms-animation-fill-backwards { animation-fill-mode: backwards; }
.wms-animation-fill-both { animation-fill-mode: both; }

/* 动画播放状态 */
.wms-animation-paused { animation-play-state: paused; }
.wms-animation-running { animation-play-state: running; }

/* ================================
 * 自定义缓动函数
 * ================================ */

:root {
  --wms-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --wms-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --wms-ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --wms-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --wms-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --wms-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  
  --wms-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --wms-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --wms-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --wms-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --wms-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --wms-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  
  --wms-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --wms-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --wms-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --wms-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --wms-ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --wms-ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  
  --wms-ease-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --wms-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --wms-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}